<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
    <meta name="generator" content="Jekyll v4.0.1">
    <title>Album example · Bootstrap</title>

    <link rel="canonical" href="https://v4.bootcss.com/docs/examples/album/">

    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" href="../static/css/bootstrap.min.css" th:href="@{/static/css/bootstrap.min.css}">

    <meta name="theme-color" content="#563d7c">

    <style>
        .bd-placeholder-img {
            font-size: 1.125rem;
            text-anchor: middle;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }

        @media (min-width: 768px) {
            .bd-placeholder-img-lg {
                font-size: 3.5rem;
            }
        }
    </style>
</head>
<body>
<header>
    <nav class="navbar navbar-light bg-light navbar-expand">
        <a href="/" class="navbar-brand">Shop</a>
        <div class="collapse navbar-collapse">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a href="/" class="nav-link active">首页</a>
                </li>
                <form   class="form-inline" >
                    <input id="searchText" type="text" placeholder="Search"  class="form-control"/>
                </form>
                <button  id="search"  class="btn btn-primary">搜索</button>
            </ul>
        </div>
        <div th:if="${#strings.isEmpty(session.user)}">
            <div class="btn-group">
                <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">登录</button>
                <div class="dropdown-menu dropdown-menu-right p-2 text-muted"  style="width: 300px">
                    <form action="/userLogin" data-stopPropagation="true" method="post">
                        <div class="form-group">
                            <input type="hidden" id="path" name="path">
                        </div>
                        <div class="form-group" data-stop>
                            <label>用户名:</label>
                            <input id="username" name="username" type="text" class="form-control" placeholder="username">
                            <div id="noUsername" class="alert alert-danger alert-dismissible fade show" style="display:none">
                                <strong>用户名不能为空</strong>
                                <button id="noUserBtn" type="button" class="close" >&times;</button>
                            </div>
                        </div>
                        <div class="form-group">
                            <label>密码:</label>
                            <input id="password" name="password" type="password" class="form-control" placeholder="password">
                            <div id="noPassword" class="alert alert-danger alert-dismissible fade show" style="display:none">
                                <strong>请输入密码</strong>
                                <button id="noPwdBtn" type="button" class="close" >&times;</button>
                            </div>
                        </div>
                        <div class="form-group" style="margin-top: 2px">
                            <button id="loginSubmit" type="submit" class="btn btn-primary" style="width: 100%;">登录</button>
                            <span id="err" th:if="${not #strings.isEmpty(loginMsg)}">
                                    <div class="alert alert-danger alert-dismissible fade show">
                                        <strong th:text="${loginMsg}"></strong>
                                        <button type="button" class="close" data-dismiss="alert">&times;</button>
                                    </div>
                                </span>
                        </div>
                        <div class="text-center">
                            <a href="/enroll">>前往注册</a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <div id="user" th:if="${session.user}">
            <img th:onclick="'javascript:locate(\''+'/user/'+${session.user.id}+'\')'"
                 style="height: 45px;width: 45px;margin-right: 20px"
                 class="rounded-circle dropdown-toggle" data-toggle="dropdown"
                 th:src="${session.user.iconURL!=null}?${session.iconPathPattern}+${session.user.iconURL}:@{/static/img/default.png}">
                <ul class="dropdown-menu dropdown-menu-right p-2 text-muted" role="menu" style="width: 100px">
                    <a class="dropdown-item" href="/show/order/list">我的订单</a>
                    <a class="dropdown-item"  href="/show/order/cart">我的购物车</a>
                    <a th:if="${session.user.state==1}" class="dropdown-item"  href="/dashboard">管理</a>
                    <a class="dropdown-item"  href="/logOut">登出</a>
                </ul>
            <span style="padding-right: 40px" th:text="${session.user.getUsername()}"></span>
        </div>
    </nav>

</header>

<main role="main">
    <div  class="carousel slide" data-ride="carousel" data-interval="5000" id="myCarousel" style="width: 58%;text-align: center;margin: 0 auto;">
        <div class="carousel-inner" style="height: 400px;">
            <ol class="carousel-indicators">
                <li style="background-color: #117a8b" data-target="#myCarousel" data-slide-to="0" class="active"></li>
                <li style="background-color: #117a8b" data-target="#myCarousel" data-slide-to="1"></li>
                <li style="background-color: #117a8b" data-target="#myCarousel" data-slide-to="2"></li>
                <li style="background-color: #117a8b" data-target="#myCarousel" data-slide-to="3"></li>
            </ol>


            <div class="carousel-item active" th:each="a:${Act}" th:if="${Act.get(0)}!=null">
                <img th:onclick="'javascript:locate(\''+'/goodDetail/'+${a.id}+'\')'" th:src="${goodsPicPath}+${a.pictures.get(0).getPicURl()}" class="d-block w-100" style="height:400px;object-fit: cover;overflow: hidden;">
            </div>

            <div class="carousel-item" th:each="a:${carousel}">
                <img th:onclick="'javascript:locate(\''+'/goodDetail/'+${a.id}+'\')'" th:src="${goodsPicPath}+${a.pictures.get(0).getPicURl()}" class="d-block w-100" style="height:400px;object-fit: cover;overflow: hidden;">
            </div>
        </div>
        <a class="carousel-control-prev" href="#myCarousel" data-slide="prev">
            <span class="carousel-control-prev-icon" style="background-color: #117a8b"></span>
        </a>
        <a class="carousel-control-next" href="#myCarousel" data-slide="next">
            <span class="carousel-control-next-icon" style="background-color: #117a8b"></span>
        </a>
    </div>
    <div class="album py-5">
        <div class="container">

            <div class="row">

                <div class="row">
                    <div class="col-md-4" th:each="good:${display}">
                        <div class="card mb-4 shadow-sm">
                            <img th:onclick="'javascript:locate(\''+'/goodDetail/'+${good.id}+'\')'" th:src="${goodsPicPath}+${good.pictures.get(0).getPicURl()}" style="height:225px;width:100%;object-fit: cover;overflow: hidden;">
                            <div class="card-body">
                                <strong class="card-text" th:text="${good.name}"></strong>
                                <br>
                                <strong class="card-text" th:text="${good.selling_price}"></strong>
                                <div class="d-flex justify-content-between align-items-center">
                                    <div class="btn-group">
                                        <button th:onclick="'javascript:locate(\''+'/goodDetail/'+${good.id}+'\')'" type="button" class="btn btn-sm btn-outline-secondary">View</button>
                                    </div>
                                    <small class="text-muted"></small>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>


            </div>
        </div>
    </div>

</main>

<footer class="text-muted">
    <div class="container">
        <p class="float-right">
            <a href="#">Back to top</a>
        </p>
        <p>Album example is &copy; Bootstrap, but please download and customize it for yourself!</p>
        <p>New to Bootstrap? <a href="https://v4.bootcss.com/">Visit the homepage</a> or read our <a
                href="/docs/getting-started/introduction/">getting started guide</a>.</p>
    </div>
</footer>
<script type="text/javascript" src="../static/js/jquery-3.3.1.js" th:src="@{../static/js/jquery-3.3.1.js}"></script>
<script type="text/javascript" src="../static/js/bootstrap.bundle.min.js" th:src="@{../static/js/bootstrap.bundle.min.js}"></script>
<script type="text/javascript" src="../static/js/piexif.js" th:src="@{../static/js/piexif.js}"></script>
<script type="text/javascript" src="../static/js/fileinput.js" th:src="@{../static/js/fileinput.js}"></script>
<script type="text/javascript" src="../static/js/zh.js" th:src="@{../static/js/zh.js}"></script>
<script>
    window.jQuery || document.write('<script type="text/javascript" src="../static/js/jquery-3.3.1.js" th:src="@{../static/js/jquery-3.3.1.js}"><\/script>')
    $(function () {
        if(document.getElementById("noUsername"))
        {
            document.getElementById("noUsername").style.display="none";
        }
        if(document.getElementById("noPassword"))
        {
            document.getElementById("noPassword").style.display="none";
        }
        $(".dropdown-toggle").on("mouseover", function() {
            $(this).dropdown('toggle');
        })
    })

    $('#loginSubmit').click(function ()
    {
        var name=$.trim($('#username').val());
        var password=$.trim($('#password').val());
        if(name==""||name==null)
        {
            document.getElementById("noUsername").style.display="block"
            return false;
        }
        else if(password==""||password==null)
        {
            document.getElementById("noPassword").style.display="block"
            return false;
        }
        else
        {
            var path=window.location.pathname;
            $('#path').val(path);
            $('#loginForm').submit;
            return true;
        }
    })
    $('#noUserBtn').click(function ()
    {
        if(document.getElementById("noUsername"))
        {
            document.getElementById("noUsername").style.display="none";
        }
    })

    $('#noPwdBtn').click(function ()
    {
        if(document.getElementById("noPassword"))
        {
            document.getElementById("noPassword").style.display="none";
        }
    })

    $('#username').click(function ()
    {
        if(document.getElementById("noUsername"))
        {
            document.getElementById("noUsername").style.display="none";
        }
        if(document.getElementById("err"))
        {
            document.getElementById("err").style.display="none";
        }
    })

    $('#password').click(function ()
    {
        if(document.getElementById("noPassword"))
        {
            document.getElementById("noPassword").style.display="none";
        }
        if(document.getElementById("err"))
        {
            document.getElementById("err").style.display="none";
        }
    })
    $("body").on('click','[data-stopPropagation]',function (e) {
        e.stopPropagation();
    });

    $('#search').click(function ()
    {
        var searchTest=$('#searchText').val();
        console.log(searchTest)
        if(searchTest==null||searchTest=='')
        {
            return false;
        }
        else
        {
            var tempwindow=window.open('_blank');
            tempwindow.location='/search?search='+searchTest;
        }
    })

    function locate(string)
    {
        window.open(string);
    }
</script>

</body>
</html>
